<!-- 我已审批的 -->
<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form :model="searchInfo" :inline="true" size="small">
        <el-form-item label="项目名称">
          <el-input v-model="searchInfo.name" placeholder="请输入项目名称" clearable />
        </el-form-item>
        <el-form-item label="申报人">
          <el-input v-model="searchInfo.applyUser" placeholder="请输入申报人" clearable />
        </el-form-item>
        <el-form-item label="科室">
          <el-select v-model="searchInfo.applyDeptId" clearable placeholder="请选择">
            <el-option v-for="item in deptList" :key="item.id" :label="item.depName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="申报时间">
          <el-date-picker
            v-model="timeValue"
            style="width: 300px;"
            clearable
            size="small"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
          />
        </el-form-item>
        <el-form-item label="项目分类">
          <el-select v-model="searchInfo.projectClass" clearable placeholder="请选择">
            <el-option v-for="item in projectClassList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="技术分类">
          <el-select v-model="searchInfo.techType" clearable placeholder="请选择">
            <el-option v-for="item in techTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="onSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="ticketList" stripe>
        <el-table-column label="#" type="index" width="80" align="center" />
        <el-table-column label="项目名称" prop="name" align="center" :show-overflow-tooltip="true" />
        <el-table-column label="项目分类" :show-overflow-tooltip="true" prop="projectClassName" align="center" width="120" />
        <el-table-column label="申报时间" align="center" prop="createTime" width="200" />
        <el-table-column label="申报人" :show-overflow-tooltip="true" prop="applyUserName" align="center" width="120" />
        <el-table-column label="科室" :show-overflow-tooltip="true" prop="deptName" align="center" width="120" />
        <el-table-column label="流程结点" :show-overflow-tooltip="true" prop="statusName" align="center" width="120" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
          <template slot-scope="scope">
            <el-button v-permisaction="['detail:MyApprovalProject']" size="mini" type="text" icon="el-icon-edit" @click="handleView(scope.row)">表单数据</el-button>
            <el-button v-permisaction="['history:MyApprovalProject']" size="mini" type="text" icon="el-icon-delete" @click="handleHistoryView(scope.row)">审批历史</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="pageInfo.total > 0" :total="pageInfo.total" :page.sync="pageInfo.currentPage" :limit.sync="pageInfo.pageSize" @pagination="onPagination" />
    </el-card>
    <ReviewDialog ref="reviewDialog" @refreshTable="getList" />
    <HistoryDialog ref="historyDialog" source="apply" />
  </div>
</template>

<script>
import {
  doAlreadyApprovedQuery
} from '@/api/xjs/work-order'
import { getNewDeptList } from '@/api/system/dept'
import ReviewDialog from './components/review'
import HistoryDialog from '../components/history'
// 搜索
import { mapGetters } from 'vuex'
import { parseTime } from '@/utils'
import { projectClassList, techTypeList } from '@/utils/common'
export default {
  name: 'MyDraft',
  components: { ReviewDialog, HistoryDialog },
  computed: {
    ...mapGetters(['circulationStatus'])
  },
  data() {
    return {
      searchInfo: {
        name: '', // 项目名称
        applyUser: '', // 申报人
        applyDeptId: '', // 科室id
        projectClass: null, // 项目分类
        techType: '', // 技术分类
        startCreateTime: '', // 最近保存开始时间
        endCreateTime: '' // 最近保存结束时间
      },
      searchInfoCopy: null, // 用于重置
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      projectClassList: projectClassList, // 项目分类列表
      techTypeList: techTypeList,
      parseTime: parseTime, // 时间处理
      timeValue: [],
      loading: false, // loading加载
      ticketList: [], // 列表数据
      deptList: [], // 科室列表
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    // 处理申报时间
    timeValue: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length) {
          this.searchInfo.startCreateTime = newVal[0]
          this.searchInfo.endCreateTime = newVal[1]
        } else {
          this.searchInfo.startCreateTime = ''
          this.searchInfo.endCreateTime = ''
        }
      },
      deep: true
    }
  },
  created() {
    this.searchInfoCopy = JSON.parse(JSON.stringify(this.searchInfo))
    this.getList()
    this.getDeptList()
  },
  methods: {
    // 搜索
    onSearch() {
      this.pageInfo.currentPage = 1
      this.getList()
    },
    // 重置
    resetQuery() {
      this.timeValue = []
      this.searchInfo = JSON.parse(JSON.stringify(this.searchInfoCopy))
      this.getList()
    },
    // 获取科室
    getDeptList() {
      getNewDeptList({ currentPage: 1, pageSize: 1000 }).then(res => {
        console.log(res)
        // const records = res.records[0]
        this.deptList = res.records
      })
    },
    // 分页
    onPagination(obj) {
      this.pageInfo.currentPage = obj.page
      this.pageInfo.pageSize = obj.limit
      this.getList()
    },
    // 列表数据
    getList() {
      const params = {
        ...this.searchInfo,
        ...this.pageInfo
      }
      doAlreadyApprovedQuery(params).then(res => {
        const data = res.records
        data.forEach(item => {
          const projectObj = this.projectClassList.find(it => it.value === item.projectClass)
          const statusObj = this.circulationStatus && this.circulationStatus.find(it => it.value === item.status)
          item.projectClassName = projectObj ? projectObj.label : ''
          item.statusName = statusObj ? statusObj.label : ''
        })
        this.ticketList = data
        this.pageInfo.total = res.total
      })
    },
    // 表单数据弹窗
    handleView(row) {
      // this.$refs.reviewDialog.open(row.process, row.id)
      // this.$refs.reviewDialog.getNewDeptTreeList()
      // this.$refs.reviewDialog.getNewDeptListManager()
      this.$refs.reviewDialog.open(row)
    },
    // 重新编辑提交弹窗
    handleEdit(row) {
      // this.$refs.editDialog.getNewDeptTreeList()
      // this.$refs.editDialog.getNewDeptListManager()
      this.$refs.editDialog.open(row)
    },
    // 查看进度和审批历史弹窗
    handleHistoryView(row) {
      this.$refs.historyDialog.open(row)
    }
  }
}
</script>

  <style scoped></style>
